<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import { Edit, Delete, Plus } from '@element-plus/icons-vue'
import { type ClusterDto, type AddClusterForm } from '@/api/cap'
import { getClusterDtoList, delCluster, updateCluster, addCluster } from '@/api/cap'
import dayjs from 'dayjs'

const searchDto = reactive({
  name: '',
})

const dialogForm = reactive<AddClusterForm>({})

const showDialog = ref(false)
const isAddForm = ref(true)

const tableData = ref<ClusterDto[]>([])

const filterTableData = computed(() =>
  tableData.value.filter(
    (data) =>
      !searchDto.name || data.clusterInfo.name.toLowerCase().includes(searchDto.name.toLowerCase()),
  ),
)
const clickSearchBtn = () => {
  getClusterDtoList().then((res) => {
    tableData.value = res
  })
}
onMounted(() => {
  clickSearchBtn()
})
const clickAddBtn = () => {
  isAddForm.value = true
  dialogForm.name = ''
  dialogForm.cpuThreshold = 90
  dialogForm.memoryThreshold = 90
  dialogForm.maxSessionTime = 600
  dialogForm.sessionOutTime = 30
  dialogForm.timeOutAction = 1
  dialogForm.clusterType = 3
  showDialog.value = true
}

const clickEdit = (row: ClusterDto) => {
  isAddForm.value = false
  dialogForm.id = row.clusterInfo.id
  dialogForm.name = row.clusterInfo.name
  dialogForm.cpuThreshold = row.clusterInfo.cpuThreshold * 10000
  dialogForm.memoryThreshold = row.clusterInfo.memoryThreshold * 10000
  dialogForm.maxSessionTime = row.clusterInfo.maxSessionTime
  dialogForm.sessionOutTime = row.clusterInfo.sessionOutTime
  dialogForm.timeOutAction = row.clusterInfo.timeOutAction
  dialogForm.clusterType = row.clusterInfo.clusterType
  showDialog.value = true
}

const clickSubDialogForm = () => {
  if (isAddForm.value) {
    const addForm: AddClusterForm = {
      id: '0',
      name: dialogForm.name,
      cpuThreshold: dialogForm.cpuThreshold / 10000.0,
      memoryThreshold: dialogForm.memoryThreshold / 10000.0,
      maxSessionTime: dialogForm.maxSessionTime,
      sessionOutTime: dialogForm.sessionOutTime,
      timeOutAction: dialogForm.timeOutAction,
      clusterType: dialogForm.clusterType,
    }
    addCluster(addForm).then(() => {
      clickSearchBtn()
      showDialog.value = false
    })
  } else {
    const editForm: AddClusterForm = {
      id: dialogForm.id,
      name: dialogForm.name,
      cpuThreshold: dialogForm.cpuThreshold / 10000.0,
      memoryThreshold: dialogForm.memoryThreshold / 10000.0,
      maxSessionTime: dialogForm.maxSessionTime,
      sessionOutTime: dialogForm.sessionOutTime,
      timeOutAction: dialogForm.timeOutAction,
      clusterType: dialogForm.clusterType,
    }
    updateCluster(editForm).then(() => {
      clickSearchBtn()
      showDialog.value = false
    })
  }
}
const clickDelBtn = (id: string) => {
  delCluster(id).then(() => {
    clickSearchBtn()
  })
}
</script>

<template>
  <div>
    <el-dialog v-model="showDialog" :title="isAddForm ? '添加集群' : '更新集群'" width="400">
      <el-form :model="dialogForm" label-width="auto" style="max-width: 400px">
        <el-form-item label="名称">
          <el-input v-model="dialogForm.name" style="width: 200px" />
        </el-form-item>
        <el-form-item label="CPU阈值">
          <el-input-number
            v-model="dialogForm.cpuThreshold"
            :min="0"
            :max="100"
            style="width: 200px"
          >
            <template #prefix>
              <span>%</span>
            </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="内存阈值">
          <el-input-number
            v-model="dialogForm.memoryThreshold"
            :min="0"
            :max="100"
            style="width: 200px"
          >
            <template #prefix>
              <span>%</span>
            </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="最大会话时长">
          <el-input-number
            v-model="dialogForm.maxSessionTime"
            :min="30"
            :max="60 * 24 * 7"
            style="width: 200px"
          >
            <template #suffix>
              <span>分钟</span>
            </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="会话超时时间">
          <el-input-number
            v-model="dialogForm.sessionOutTime"
            :min="10"
            :max="60 * 24"
            style="width: 200px"
          >
            <template #suffix>
              <span>分钟</span>
            </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="超时处理方式">
          <el-radio-group v-model="dialogForm.timeOutAction">
            <el-radio :value="1">注销会话</el-radio>
            <el-radio :value="2">断开会话</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="集群类型">
          <el-radio-group v-model="dialogForm.clusterType">
            <el-radio :value="1">私有</el-radio>
            <el-radio :value="2">抢占</el-radio>
            <el-radio :value="3">共享</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="clickSubDialogForm"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-card>
      <el-row class="mb-5">
        <el-col>
          <el-input
            v-model="searchDto.name"
            class="max-w-xs mr-5"
            placeholder="按名称过滤"
            style="width: 240px"
            clearable
          />
          <el-button type="primary" :icon="Plus" @click="clickAddBtn">添加</el-button>
        </el-col>
      </el-row>
      <el-table :data="filterTableData" stripe style="width: 100%" show-overflow-tooltip>
        <el-table-column type="index" width="50" label="#" />
        <el-table-column prop="clusterInfo.name" label="集群名称" />
        <el-table-column prop="clusterInfo.clusterType" label="集群类型">
          <template #default="scope">
            <el-tag v-if="scope.row.clusterInfo.clusterType == 1">私有</el-tag>
            <el-tag type="success" v-if="scope.row.clusterInfo.clusterType == 2">独占</el-tag>
            <el-tag type="primary" v-if="scope.row.clusterInfo.clusterType == 3">共享</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="clusterInfo.cpuThreshold" label="CPU阈值">
          <template #default="scope">
            {{ (scope.row.clusterInfo.cpuThreshold * 10000).toFixed(2) + '%' }}
          </template>
        </el-table-column>
        <el-table-column prop="clusterInfo.memoryThreshold" label="内存阈值">
          <template #default="scope">
            {{ (scope.row.clusterInfo.memoryThreshold * 10000).toFixed(2) + '%' }}
          </template>
        </el-table-column>
        <el-table-column prop="clusterInfo.maxSessionTime" label="最大会话时长">
          <template #default="scope">
            {{ scope.row.clusterInfo.maxSessionTime + ' 分钟' }}
          </template>
        </el-table-column>
        <el-table-column prop="clusterInfo.sessionOutTime" label="闲置会话时长">
          <template #default="scope">
            {{ scope.row.clusterInfo.sessionOutTime + ' 分钟' }}
          </template>
        </el-table-column>
        <el-table-column prop="clusterInfo.timeOutAction" label="超时处理方式">
          <template #default="scope">
            <el-tag v-if="scope.row.clusterInfo.timeOutAction == 1">注销会话</el-tag>
            <el-tag type="success" v-if="scope.row.clusterInfo.timeOutAction == 2">断开会话</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="clusterInfo.creator" label="创建人" />
        <el-table-column prop="clusterInfo.createdAt" label="创建时间" width="140">
          <template #default="scope">
            {{
              dayjs(new Date(scope.row.clusterInfo.createdAt * 1000)).format('YYYY-MM-DD HH:mm:ss')
            }}
          </template>
        </el-table-column>
        <el-table-column prop="clusterInfo.createdAt" label="主机数量">
          <template #default="scope">
            {{ scope.row.hostList == null ? '-' : scope.row.hostList.length }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-link :icon="Edit" type="primary" class="mr-3" @click="clickEdit(scope.row)"
              >更新</el-link
            >
            <el-link
              :icon="Delete"
              type="primary"
              class="mr-3"
              @click="clickDelBtn(scope.row.clusterInfo.id)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped></style>
